<template>
    <v-app class="fill-height">
        <v-toolbar app dark tabs>
            <v-toolbar-title class="headline ">
                <!--<v-icon medium class="mr-1">widgets</v-icon>-->
                <div style="line-height: 30px; display: inline-block; vertical-align: middle; padding-right: 4px;" >
                    <img src="logo.png" width="24px" height="24px" />
                </div>

                <span>easyDisk Web</span>
                <span class="font-weight-light caption"> v1.0.5</span>
            </v-toolbar-title>

            <v-spacer></v-spacer>

            <v-btn icon>
                <v-icon>more_vert</v-icon>
            </v-btn>

            <template v-slot:extension>
                <v-tabs
                        v-model="tabs"
                        centered
                        show-arrows
                        dark
                        color="transparent"
                        slider-color="yellow"
                        value="0"
                >
                    <v-tab key="0" href="#tab_home">
                        <v-icon class="mr-1">home</v-icon>
                        首页
                    </v-tab>
                    <v-tab key="1" href="#tab_blog">
                        <v-icon class="mr-1">folder_shared</v-icon>
                        我的笔记
                    </v-tab>

                    <v-tab key="2" href="#tab_file">
                        <v-icon class="mr-1">cloud</v-icon>
                        共享文件
                    </v-tab>
                </v-tabs>
            </template>

        </v-toolbar>
        <v-content class="fill-height" style="padding-top: 92px;">
            <HomePage :set_tabs="set_tabs" :get_nums="get_nums" v-if="tabs === 'tab_home'"/>
            <MDBrowser v-if="tabs === 'tab_blog'"/>
            <FileBrowser v-if="tabs === 'tab_file'"/>
        </v-content>
    </v-app>
</template>

<script>
    import HomePage from './components/homepage'
    import MDBrowser from './components/mdbrowser'
    import FileBrowser from "./components/filebrowser"

    export default {
        name: 'App',
        components: {
            HomePage,
            FileBrowser,
            MDBrowser,
        },
        data() {
            return {
                tabs: null,
                nums_click: [0, 0, 0]
            }
        },
        methods: {
            set_tabs(name) {
                this.tabs = name;
            },
            get_nums(){
                return this.nums_click;
            }
        },
        watch: {
            tabs(v) {
                if (v === 'tab_home') {
                    this.nums_click[0] += 1;
                }
                if (v === 'tab_file') {
                    this.nums_click[2] += 1;
                }
                if (v === 'tab_blog') {
                    this.nums_click[1] += 1;
                }
            }
        }
    }
</script>

<style>

</style>
